import { SettingModelState } from '@/models/setting';
import { Layout, Form, Input, Menu, Dropdown } from 'antd';
import { NavLink } from 'react-router-dom';
import {
  getLocale,
  Link,
  SearchModelState,
  setLocale,
  useDispatch,
  useIntl,
  useSelector,
} from 'umi';
import styles from './index.less';
import { SearchOutlined, TranslationOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { Drawer, Button } from 'antd';
import { DrawerProps } from 'antd/es/drawer';
import Theme from '../Theme';
import classNames from 'classnames';
const { Header } = Layout;
const locales: { [key: string]: string } = {
  'zh-CN': 'zh',
  'en-US': 'en',
  zh: 'zh',
  en: 'en',
};
const CommonHerder = () => {
  const dispatch = useDispatch();
  const { setting, pageSetting } = useSelector(
    (state: { setting: SettingModelState }) => state.setting,
  );
  const { search } = useSelector(
    (state: { search: SearchModelState }) => state.search,
  );
  const [visible, setVisible] = useState(false);
  const [size, setSize] = useState<DrawerProps['size']>();
  const showDefaultDrawer = () => {
    setSize('default');
    setVisible(true);
  };
  const showLargeDrawer = () => {
    setSize('large');
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  const onFinish = (values: any) => {
    dispatch({
      type: 'search/getSearch',
      payload: values.search,
    });
  };
  const intl = useIntl();

  useEffect(() => {
    setLocale(locales[getLocale()]);
  }, []);
  const menu = (
    <Menu>
      <Menu.Item key="zh" onClick={() => setLocale('zh', false)}>
        {intl.formatMessage({ id: 'zh', defaultMessage: '中文' })}
      </Menu.Item>
      <Menu.Item key="en" onClick={() => setLocale('en', false)}>
        {intl.formatMessage({ id: 'en', defaultMessage: '英文' })}
      </Menu.Item>
    </Menu>
  );
  return (
    <Header className={styles.header}>
      <div className={classNames(styles.containerA, 'container')}>
        <div className={styles.left}>
          <NavLink
            to="/"
            exact
            activeStyle={{
              fontWeight: 'bold',
              color: '#ff0064',
            }}
          >
            <div
              className={styles.logo}
              dangerouslySetInnerHTML={{ __html: setting.systemLogo! }}
            ></div>
          </NavLink>
          <li>
            <NavLink
              to="/"
              exact
              activeStyle={{
                fontWeight: 'bold',
                color: '#ff0064',
              }}
            >
              {intl.formatMessage({ id: 'article' })}
            </NavLink>
          </li>
          <li>
            <NavLink
              to="/archives"
              exact
              activeStyle={{
                fontWeight: 'bold',
                color: '#ff0064',
              }}
            >
              {intl.formatMessage({ id: 'archives' })}
            </NavLink>
          </li>
          <li>
            <NavLink
              to="/knowledge"
              exact
              activeStyle={{
                fontWeight: 'bold',
                color: '#ff0064',
              }}
            >
              {intl.formatMessage({ id: 'knowledgeBooks' })}
            </NavLink>
          </li>
          {pageSetting.map((item) => {
            return (
              <li key={item.id}>
                <NavLink
                  to={`/page/${item.path}`}
                  exact
                  activeStyle={{
                    fontWeight: 'bold',
                    color: '#ff0064',
                  }}
                >
                  {item.name}
                </NavLink>
              </li>
            );
          })}
        </div>
        <div className={styles.right}>
          <li>
            <Dropdown overlay={menu}>
              <TranslationOutlined />
            </Dropdown>
          </li>
          <li>
            <Theme />
          </li>
          <li>
            <span onClick={showLargeDrawer}>
              <SearchOutlined />
            </span>
          </li>
        </div>

        <Drawer
          size={size}
          placement="bottom"
          onClose={onClose}
          visible={visible}
          closable={false}
        >
          <div className={styles.form}>
            <h1>文章搜索</h1>
            <div className={styles.formItem}>
              <Form onFinish={onFinish}>
                <div className={styles.formItem1}>
                  <Form.Item className={styles.input} name="search">
                    <Input />
                  </Form.Item>
                  <Button htmlType="submit" onClick={onFinish}>
                    <SearchOutlined />
                  </Button>
                </div>
                {search &&
                  search.map((item) => {
                    return (
                      <Link
                        to={`/article/${item.id}`}
                        className={styles.articleList}
                        onClick={onClose}
                      >
                        {item.title}
                      </Link>
                    );
                  })}
              </Form>
            </div>
          </div>
        </Drawer>
      </div>
    </Header>
  );
};
export default CommonHerder;
